<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_dfj23uc6z9o.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	</head>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div style="width: auto;" class="col-md-4 nav-tab-box padding-0 layui-form">
									<select name="interest" lay-filter="fkzh">
										<option value=""></option>
										<option value="0" selected="">全部付款账号</option>
										<option value="1">现金</option>
										<option value="2">中国工商银行 ****5093</option>
										<option value="3">中国建设银行深圳市中旅公馆支行**8420</option>
									</select>
								</div>
								<div class="col-md-4 flex"><i class="iconfont icon-riqi"></i><input type="text" class="layui-input" id="test10" placeholder=" - "></div>
								<div class="col-md-4 padding-0 flex">
									<i class="iconfont icon-search"></i>
									<input type="text" class="layui-input secrh" placeholder="请输入订单号/经销商名称" value="" />
									<span class="gjss" style="visibility: hidden;" title="点击进行高级搜索">高级搜索</span>
								</div>
							</div>
							<div class="heard-right col-md-4 padding-0 flex" style="font-size: 18px;">
								待确认收款合计：<span class="ff6600">0.00</span>
							</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-skqr" lay-filter="test"></table>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			var vm = new Vue({
				el:".container-fluid",
				data:{
					
				},
				methods:{
					
				}
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element,
				layer = layui.layer;
				
				//时间范围选择
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});	
				
				
				//收款账号选择
				form.on('select(skzh)',function(data){
					layer.msg("您当前所选择的是："+data.value)
				})
				
				
				
				// 数据列表渲染
				table.render({
					elem: '#order-skqr'
					,data:DataArray2// data为数据库查到的数据
					,height: 500
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{type:'checkbox'}
						,{field:'userid', width:180, title: '流水号'}
						,{field:'pwd', width:180, title: '支付时间'}
						,{field:'uname', width:180, title: '经销商名称'}
						,{field:'sex', width: 130, title: '支付方式'}
						,{field:'rank', width:130, title: '金额',}
						,{field:'uptime', width:180, title: '收款账户',}
						,{field:'exptime', width:130, title: '摘要',}
					]]
					,page: true
				});
				
				table.on('tool(test)', function(obj){
					
				})
			});
		</script>
	</body>
</html>
